<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>书评网</title>
    <!-- 引入样式-->
    <link href="../imgs/2.jpeg" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="../js/element-ui/index.css">
    <!-- 引入js-->
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/http.js"></script>
    <script src="../js/element-ui/index.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header style="height: 30px">
                <el-menu class="el-menu-demo"
                         mode="horizontal"
                         default-active="1"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b">
                    <el-menu-item index="1" @click="handlerMenu('home-page.html')">首页</el-menu-item>
                    <el-menu-item index="2" @click="handlerMenu('book-reviews.html')">书评圈</el-menu-item>
                    <el-menu-item index="3" @click="handlerMenu('random.html')">随机</el-menu-item>
                    <el-menu-item index="4" @click="handlerMenu('query.html')">喜欢</el-menu-item>
                    <el-menu-item index="5" @click="handlerMenu('msg.html')">消息</el-menu-item>
                    <el-submenu index="6" style="float: right">
                        <template slot="title">{{user}}</template>
                        <el-menu-item index="6-1" @click="logout">退出账号</el-menu-item>
                        <el-menu-item index="6-2" @click="handlerMenu('my.html')">修改个人信息</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-main>
                <el-container>
                    <iframe name="cIframe"
                            class="c_iframe"
                            :src="iframeUrl"
                            width="100%"
                            height="580px"
                            frameborder="0">
                    </iframe>
                </el-container>
            </el-main>

            <el-footer>
                <div>
                    <center>
                    <a href="https://beian.miit.gov.cn" style="color:#939393">皖ICP备2023002105号</a>
                    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34072202000272" style="color:#939393">
                        <img src="../imgs/3.jpg" style="margin-left:10px"/>皖公网安备34072202000272号
                    </a>
                    </center>
                </div>
            </el-footer>
        </el-container>
    </div>

<script>
    // http://localhost:8080/pages/index.html
    let vue=new Vue({
        el:"#app",
        data:{
            iframeUrl:"home-page.html",
            user:null,
        },
        created(){
            this.user = localStorage.getItem("user");
            if (this.user!=null){
                this.$message.success("欢迎你"+this.user);
            }else {
                this.$message.error("你尚未登录，请先登录！");
                window.location.href="login.html";
            }
        },
        methods:{
            handlerMenu(url){
                this.iframeUrl=url;
            },
            logout(){
                http.get("/user/logout").then(res=>{
                    window.location.href="login.html";
                });
            }
        }
    })
</script>
</body>
</html>
